<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core' %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%   
response.setHeader("Cache-Control","no-store");   
response.setHeader("Pragma","no-cache");   
response.setDateHeader("Expires",0);   
if (request.getProtocol().equals("HTTP/1.1")) 
response.setHeader("Cache-Control", "no-cache"); 
%>  
<%
    /**
     * @Description : 나의 VOC
     * @Modification Information
     *
     *   수정일               수정자                   수정내용
     *  -------    --------    ---------------------------
     *
     *
     */
%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>VOC System</title>
 
<!-- CSS-JQuery --> 
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/start/jquery-ui-1.10.3.custom.css'/>" />
<!-- CSS-JQGrid -->
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/ui.jqgrid.css'/>" />
<link rel="stylesheet" type="text/css" media="screen" href="<c:url value='/resources/css/ui.multiselect.css'/>" />

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
  <script src="../assets/js/html5shiv.js"></script>
<![endif]-->
 
<style>
html,body { height:100%; }
body { margin:0; padding:0; }
#wrap { width:100%; height:100%;}

.table_row {
  padding:1px 0px 1px 0px;
  width:100%;
  clear:both;
}
.col {
  padding:1px 0px 1px 0px;
  float:left;
}
.col_last {
  padding:1px 0px 1px 0px;
  float:left;
}

/** jqury datepicer */
.ui-datepicker{ font-size: 12px; width: 180px; }
.ui-datepicker select.ui-datepicker-month{ width:30%; font-size: 11px; }
.ui-datepicker select.ui-datepicker-year{ width:40%; font-size: 11px; }
.ui-datepicker-trigger { position:relative;top:3px ;}

/** jqury button */
.ui-button-text { position:relative; bottom:4px; }

/** jquery resizable */
.ui-resizable-e { 
    cursor: e-resize; 
    /*width: 1px;*/ 
    right: -7px; 
    top: 0; 
    bottom: 0; 
    /*background-color: gray;*/
}

/** general style */
body { font-family:'돋움', Dotum, AppleGothic, sans-serif; font-size:12px;}
body, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset, legend, input, textarea, button, select { margin:0; padding:0; }
button {height:20px;}
.calendar {width:80px;} 

</style> 
   
<!-- JS-JQuery -->    
<script type="text/javascript" src="<c:url value='/resources/js/jquery-1.9.0.min.js'/>"></script>
<!-- JS-JQuery-UI -->
<script type="text/javascript" src="<c:url value='/resources/js/jquery-ui-1.10.3.custom.min.js'/>"></script>
<!-- JS-JQGrid -->
<script type="text/javascript" src="<c:url value='/resources/js/ui.multiselect.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/i18n/grid.locale-kr.js'/>"></script>
<script type="text/javascript" src="<c:url value='/resources/js/jquery.jqGrid.min.js'/>"></script>
<!-- JS-JQuery.form -->
<script type="text/javascript" src="<c:url value='/resources/js/jquery.form.min.js'/>"></script>
<!-- JS-JQuery.validate -->
<script type="text/javascript" src="<c:url value='/resources/validate/jquery.validate.min.js'/>"></script>
<!-- JS-JQuery.blockUI -->
<script type="text/javascript" src="<c:url value='/resources/block/jquery.blockUI.js'/>"></script>
<!-- JS-VOC -->
<%@include file="/WEB-INF/jsp/common/commonJs.jsp"%> 
 
<script type="text/javascript">
var total_width = 1030;
var splitbar_width = 0;

/** 초기로딩시 colNames, colModel 속성을 db에 저장된 값으로 세팅한다. */
var grid = $("#listMstr");

var colNames = ['1','2','3'];
var colModel = [{name:'1',index:'1', width:100}
    ,{name:'2',index:'2', width:100}
    ,{name:'3',index:'3', width:100}];

<c:if test="${not empty gridConfig.listMstr.COLNAMES}">
    colNames = JSON.parse('${gridConfig.listMstr.COLNAMES}');
</c:if>
<c:if test="${not empty gridConfig.listMstr.COLMODEL}">
    colModel = JSON.parse('${gridConfig.listMstr.COLMODEL}');
</c:if>


$(document).ready(function() {

	$( "#tab_group1" ).resizable({
		  resize: function( event, ui ) {
		      var width = $("#tab_group1").width();
		      if(width > total_width) {
		        width = total_width;
		        
		        $('#tab_group1').css('width', width);
		      }
		      $('#work_group1').css('width', (total_width - ui.size['width'] - splitbar_width));  
		  },
		  handles: 'e',
		  maxHeight: 300,
		  maxWidth: 700,
		  minHeight: 300,
		  minWidth: 250	
	});
	
	// Tab초기화
    $("#tabs1").tabs();
    $("#tabs2").tabs(); 
	
	// calendar 
	$( "#sDate, #eDate" ).datepicker({
	  dateFormat: 'yy/mm/dd',
      showOn: "button",
      buttonImage: "<c:url value='/resources/images/calendar_blue.png'/>",
      buttonImageOnly: true,
      changeMonth: true, // 월선택 select box 표시 (기본은 false)
      changeYear: true,  // 년선택 selectbox 표시 (기본은 false)
      showButtonPanel: true, // 하단 today, done  버튼기능 추가 표시 (기본은 false) 
    });
	
    // 버튼
    $( "#btn_srch" ).button()
    .click(function() { 
        event.preventDefault();
        //$("#form1").submit();
    });
    $( "#btn_srchDtl" ).button()
    .click(function() { 
        event.preventDefault();
        
    });
    $( "#btn_save" ).button().click(function() { 
        event.preventDefault();
        
        /* var opt = {
                autoOpen: false,
                modal: true,
                width: 700,
                height:550,
                resizable:false,
                title: 'VOC 등록'
        }; */
        
        $("#popup_vocreg").dialog({
        	autoOpen: false,
        	modal: true,
        	width: 700,
        	height: 550,
        	resizable: false,
        	title: "VOC 등록",
        	open: function() {
        	    var currDate = new Date().format('yyyy/MM/dd');
        	    var currTime = new Date().format('HH:mm');
        	    
        	    $("#"+this.id + " " + "#happen_date1").val(currDate);
        	    $("#"+this.id + " " + "#happen_date2").val(currTime); 
        	    
        	    { 
        	        // 폼 변경감지 제외 대상 컨트롤 등록
        	    	//watchChanged("#regform","#happen_date1, #happen_date2");
        	    	watchChanged("#regform");
        	    };
            },
        	close: function(e) {
                // 폼 변경감지  처리
        		/* if (isChanged("#regform")) {
                    //alert("changed!!");
                } else {
                    //alert("not changed!!");
                }*/
                //=====>
                
                // fork-폼 변경감지  처리 callback pattern
        		/*isChanged("#regform",{
        		    changed: function() {alert("changed!");},
        		    unchanged: function() {alert("unchanged!");},
        		});*/
                
        	    // 폼 초기화
        		$("#regform #no_resp_flag").prop("checked",true).change();
        	    $("#regform #no_resp_flag").prop("checked",false).change();
        	    $("#regform").each(function() {  
                    this.reset();  
                });
        	    
        	    var html  = "<tr>                                                                      \n";  
        	        html += "    <td><input type='file' id='attachFile[0]' name='attachFile[0]'/></td> \n";
                    html += "</tr>                                                                     \n";
                $("#fileTable").html(html);
        		
        	}
        });
        
        $("#popup_vocreg").dialog("open");
        
    });
    $( "#btn_print" ).button()
    .click(function() { 
        event.preventDefault();
        //$("#form1").submit();
    });
    $( "#btn_export" ).button()
    .click(function() { 
        event.preventDefault();
        //$("#form1").submit();
    });
    $( "#btn_srchHist" ).button()
    .click(function() { 
        event.preventDefault();
        //$("#form1").submit();
    });    
    $( "#btn_colMngr" ).button()
    .click(function() { 
        event.preventDefault();
        //$("#form1").submit();
    });    

	// master grid
	$("#listMstr").jqGrid({
		url: "<%=request.getContextPath()%>/test/jqgrid02/listMstr.json",
		datatype: "json",
		//height: 'auto',
		width:1030,
		//width:'auto',
		height: 150,
	   	/*colNames:['선택'
                 ,'No'
                 ,'VOC ID'
                 ,'요구 유형'
                 ,'제목'
                 ,'고객 성명'
                 ,'등록일시'
                 ,'접수일시'
                 ,'처리기한'
                 ,'처리상태'
                 ,'처리자'
                 ,'복합 VOC'
	   	],*/
        colNames:colNames,	   	
	   	colModel:colModel,
		rowNum: 20,
		rownumbers: false,
		rowList: [10,20,30],
	   	pager: "#pagerMstr",
	   	shrinkToFit :false,
	   	viewrecords: true, // ==> 하단 툴바에 건수 표시
	   	sortable : true,   // ==> 이 옵션으로 컬럼 이동 가능
	   	//caption: "Master Data", 
	   	emptyrecords:"No records to view",
	   	loadonce:true,
	   	onSelectRow: function(rowid) {
	   		//alert($("#listMstr").getRowData(rowid)["COUNTRY"]);
	   		var postData = {
	   			COUNTRY_ISO_CODE:$("#listMstr").getCell(rowid, "COUNTRY_ISO_CODE")
			}; 
			$("#listDtl").jqGrid('setGridParam',{url:"<%=request.getContextPath()%>/test/jqgrid02/listDtl.json"
											   ,datatype: "json", postData: postData})
						.jqGrid('setCaption',"Detail Data: "+rowid)
						.trigger('reloadGrid');
		}
	})
	.navGrid('#pagerMstr',{add:false,edit:false,del:false})
	.bindKeys(   // ==> 키보드 액션을  가능하게 한다.
			{"onEnter": function(rowid) {
                            alert("You enter a row with id:"+rowid);	    	    		   	
                        }
            ,"scrollingRows": true
			}
    )
	.jqGrid('navButtonAdd','#pagerMstr',{ // /** Column chooser */
	    caption: "항목관리",
	    title: "항목관리",
	    onClickButton : function() {
	        // 설정 창 문구 설정
	        $.extend(true, $.ui.multiselect, {
	            defaults: {
	                searchable: false
	            },
	            locale: {
	                addAll: 'Make all visible',
	                removeAll: 'Hidde All',
	                itemsCount: 'Avlialble Columns'
	            },
	        });
	        $.extend(true, $.jgrid.col, {
	            width: 480,
	            height: 350,
	            modal: true,
	            msel_opts: {dividerLocation: 0.5},
	            dialog_opts: {
	                //show: 'blind',
	                //hide: 'explode',
	            }
	        });	        
	    	
	        jQuery("#listMstr").jqGrid('columnChooser', {
	        	title: "항목관리 (보여지거나 숨길 항목을 선택하세요.)", 
	            dialog_opts: {
	               // modal: true
	               //,minWidth: 480
	                resizable: false, // 설정 창 사이즈 재조정 옵션
	               //,show: 'blind',  // 설정 창 나타내기 애니메이션 옵션
	               //,hide: 'explode' // 설정 창 숨기기 애니메이션 옵션
	            },
	            done : function (perm) {
	                // 그리드를 재조정할때의 이벤트 설정
	                if(perm) {
	                    // "OK" button are clicked
	               //alert('bef perm:'+perm);     
	                    this.jqGrid("remapColumns", perm, true);
	                    alert("항목이 변경되었습니다.");
	                    //saveGridSetting('MODEL_LIST' , perm);
	              //alert('aft perm:'+perm) ;     
//@TODO DB에 설정정보 저장
	                    {
	                    	//a = this.getGridParam("colModel") 
	                    	//  a를 JSON문자열로 변환    
	                    	//b = perm
	                    	//a,b 저장
	                    	
	                  //console.log("@colNames:"+this.getGridParam("colNames"));  	
	                  //console.log("@colModel:"+this.getGridParam("colModel"));  	
	                    	fn_savePersonalConfig("listMstr", this.getGridParam("colNames"), this.getGridParam("colModel"), perm);
	                    }
	                    
	                } else {
	                    // we can do some action in case of "Cancel" button clicked
	                }
	                
	            },
	        });
	    },
    })
    .jqGrid('navButtonAdd','#pagerMstr',{ // /** Export to Excel */
        caption: "Excel",
        title: "Export to Excel", 
        buttonicon: "ui-icon-extlink",
        onClickButton : function() {
        },
    });	

	
	
	
	/** Column chooser */
	/*jQuery("#listMstr").jqGrid('navButtonAdd','#pagerMstr',{
	    caption: "항목관리",
	    title: "Reorder Columns",
	    onClickButton : function (){
	        jQuery("#listMstr").jqGrid('columnChooser');
	    }
	});
	jQuery("#listMstr").columnChooser(options);
	*/
	/** 컬럼 hide/show */
	/* jQuery("#hc").click( function() {
	    jQuery("#list17").jqGrid('navGrid','hideCol',"tax");
	});
	jQuery("#sc").click( function() {
	    jQuery("#list17").jqGrid('navGrid','showCol',"tax");
	}); */
});	

function fn_savePersonalConfig(gridId, colNames, colModel, perm) {
	
	$.ajax({
	    type : "post",
	    url : "<c:url value="/main/savePersonalConfig"/>",
	    dataType: "json",
	    data : {
	        "GROUP_CODE": "GRID",
	        "KEY2": gridId,	
	    	"VALUE1": JSON.stringify(colNames),	
	    	"VALUE2": JSON.stringify(colModel),
            "VALUE3": JSON.stringify(perm),	    	
	    },
	    success : function(msg) {
	        /* if (eval(msg)) {
	            $('#valcheck').val('true');
	            alert("사용가능한 코드 그룹명입니다.");
	        } else {
	            $('#valcheck').val('false');
	            alert("이미 등록된 코드 그룹명입니다.");
	         }*/
	    },
        error : function(xhr, status, error) {
            //alert("에러발생");
        },
	    //contentType: "application/json",
	});
}

// 토글바 클릭시 콜백 함수 
function fn_toggleCallback(toggle_open) {
	
	if(toggle_open) {
		total_width -= 220; 
		$("#comm_btn_area").css('width',530);
		$("#local_btn_area").css('width',530);
		
		$("#listMstr").setGridWidth(1030, true);
		//$("#tab_group1").css('width',530);
		console.log($("#tab_group1").width());
		console.log(total_width-$("#tab_group1").width());
		$("#work_group1").css('width',total_width-$("#tab_group1").width());
	}
	else {
		total_width += 220;
		$("#comm_btn_area").css('width',530+220);
		$("#local_btn_area").css('width',530+220);
		
		$("#listMstr").setGridWidth(1030+220, true);
        //$("#tab_group1").css('width',530);
        $("#work_group1").css('width',$("#work_group1").width()+220);
    }	
}



</script>
</head>
<body>
    <!-- modal confirm -->
    <div id="modal_confirm" title="Confirmation" style="display:none">
      <p><span class="ui-icon ui-icon-notice" style="float:left; margin:0 7px 20px 0;"></span>저장하시겠습니까?</p>
    </div>
    <!--// modal success -->
    <!-- modal alert -->
    <div id="modal_success" title="Success" style="display:none">
      <p><span class="ui-icon ui-icon-check" style="float:left; margin:0 7px 20px 0;"></span>저장되었습니다.</p>
    </div>
    <div id="modal_fail" title="Fail" style="display:none">
      <p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span></p>
    </div>
    <!--// modal alert -->
    
    <!-- 등록팝업 -->
    <div id="popup_vocreg" style="display:none">
        <jsp:include page="vocRegistMngr.jsp" />
    </div>
    <!--//등록팝업 --> 

    <div style="height:100%;padding-left:7px;">
	    <div class="table_row"> 
	        <div class="col" style="width:500px;height:20px;">
	            <h3>나의 VOC</h3>
	        </div>
	        <div id="comm_btn_area" class="col" style="width:530px;height:20px;text-align:right;">
	            <button id="btn_save">등록</button>
	            <button id="btn_print">인쇄</button>
	            <button id="btn_export">파일저장</button>
	        </div>                
	    </div>
	    <div class="table_row"> 
            <div class="col" style="width:500px">
                   Email
                    <select id="sltCond1">
                        <option selected="selected">접수일 </option>
                        <option>등록일</option>
                    </select>
                    <input type="text" id="sDate" name="sDate" class="calendar">  ~ <input type="text" id="eDate" name="eDate" class="calendar">
                    <button id="btn_srch">조회</button>
                    <button id="btn_srchDtl">상세조회</button>
            </div>
            <div class="col"  id="local_btn_area" style="width:530px;text-align:right;padding-top:3px;">
                <button id="btn_colMngr">항목 관리</button>
            </div>            
	    </div>
	    <div class="table_row">    
	       <div class="col">
	            <table id="listMstr"></table> 
	            <div id="pagerMstr"></div> 
	       </div>
	    </div>
	
        <div class="table_row">	    
		    <div class="col">
			    <div id="tab_group1" class="ui-widget" style="float:left;width:520px;"> 
	                <div id="tabs1" style="height:570px;overflow: hidden;">
	                    <ul style="overflow:hidden;">
	                        <li><a href="#tabs1_1">발생</a></li>
	                        <li><a href="#tabs1_2">내용</a></li>
	                        <li><a href="#tabs1-3">접수</a></li>
	                        <li><a href="#tabs1_4">배분</a></li>
	                    </ul>
                        <button id="btn_srchHist" style="position: absolute;top: 15px;right: 10px;">이력조회</button>
	                    <div id="tabs1_1" style="padding:0;width:520px;">
	                       <!-- 발생 -->
	                       <%@ include file="vocDtlhappenList.jsp" %>
	                    </div>
	                    <div id="tabs1_2" style="padding:0;width:520px;">
	                       <!-- 내용 -->
                           <%@ include file="vocDtlcontentList.jsp" %>
	                    </div>
	                    <div id="tabs1_3" style="padding:0;width:520px;">
                           <!-- 접수 -->
                           <%--@ include file="vocDtlacceptList.jsp" --%>
	                    </div>
	                    <div id="tabs1_4"  style="padding:0;width:520px;">
                           <!-- 배분 -->
                           <%--@ include file="vocDtlallocatList.jsp" --%>	                    
	                    </div>
	                </div>
			    </div>
			    <div id="work_group1" style="float:left;width:510px;">
                    <div id="tabs2" style="height:570px;overflow: hidden;">
                        <ul style="overflow:hidden;">
                            <li><a href="#tabs2_1">처리</a></li>
                            <li><a href="#tabs2_2">접수</a></li>
                        </ul>
                        <div id="tabs2_1">
                        </div>
                        <div id="tabs2_2">
                        </div>
                    </div>
                </div> 
			</div>    
			<!--<div class="col" style="width:50%">
			
			</div>  -->
	   </div>    
    </div>

	<!--<br></br>
    <table id="listMstr"></table> 
    <div id="pagerMstr"></div> 
    <br></br>
    <table id="listDtl"></table>
	<div id="pagerDtl"></div>  -->
    

    
    <!-- Bootstrap javascript
    ================================================== -->
    <!--<script type="text/javascript" src="<c:url value='/resources/bootstrap/js/bootstrap.min.js'/>"></script>  -->    
</body>
</html>